// pages/innerwxmap/innerwxmap.js
// index.js
// 获取应用实例
const app = getApp()
import drawQrcode from '../../lib/weapp.qrcode.esm.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    qrcodeImagePath: '',
    qrcodeWidth: 0,
    sliderPosition: 0,
    latitude: 39.909088,
    longitude: 116.397643,
    initialY: 0,
    damping: 30,
    activeNames: ['2'],
    value: 40,
    gradientColor: {
      '0%': '#ffd01e',
      '100%': '#ee0a24',
    },
  },

 
 

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    const that = this;
    wx.createSelectorQuery().select('#speedometer').boundingClientRect(rect => {
      const canvasWidth = rect.width;
      const canvasHeight = rect.height;
    
      that.drawSpeedometer(-1, canvasWidth, canvasHeight);
    }).exec();
    
  },
  drawSpeedometer: function (speed,canvasWidth, canvasHeight) {
    const ctx = wx.createCanvasContext('speedometer');

    const centerX = canvasWidth / 2;
    const centerY = canvasHeight / 2;
    const radius = Math.min(canvasWidth, canvasHeight) * 0.4;
  
    // 绘制仪表盘背景
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0.65 * Math.PI, 2.35 * Math.PI);
    ctx.lineWidth = radius * 0.2;
    ctx.strokeStyle = '#ccc';
    ctx.stroke();
  

  // 绘制刻度线和刻度值
  const totalTicks = 20; // 更改刻度数量
  const maxSpeed = 200; // 更改最大速度
  for (let i = 0; i <= totalTicks; i++) {
    const tickAngle = 0.65 * Math.PI + i * (1.7 * Math.PI / totalTicks); // 更改角度范围
    const tickLength = i % 2 === 0 ? 15 : 7;
    const innerX = centerX + (radius - tickLength) * Math.cos(tickAngle);
    const innerY = centerY + (radius - tickLength) * Math.sin(tickAngle);
    const outerX = centerX + radius * Math.cos(tickAngle);
    const outerY = centerY + radius * Math.sin(tickAngle);

    ctx.beginPath();
    ctx.moveTo(innerX, innerY);
    ctx.lineTo(outerX, outerY);
    ctx.lineWidth = i % 2 === 0 ? 3 : 1;
    ctx.strokeStyle = '#333';
    ctx.stroke();

    // 绘制刻度值
    if (i % 2 === 0) {
      const tickValue = i * (maxSpeed / totalTicks);
      const textX = centerX + (radius - 30) * Math.cos(tickAngle) - 6;
      const textY = centerY + (radius - 30) * Math.sin(tickAngle) + 4;
      ctx.setFontSize(12);
      ctx.fillStyle = 'black';
      ctx.fillText(tickValue, textX, textY);
    }
  }

  // 计算速度指针角度
  const angle = 0.65 * Math.PI + (speed / maxSpeed) * (1.7 * Math.PI);

  // 绘制速度指针
  ctx.beginPath();
  ctx.moveTo(centerX, centerY);
  ctx.lineTo(centerX + radius * Math.cos(angle), centerY + radius * Math.sin(angle));
  ctx.lineWidth = 3;
  ctx.strokeStyle = '#4CAF50';
  ctx.stroke();

  // 绘制仪表盘中心
  ctx.beginPath();
  ctx.arc(centerX, centerY, 5, 0, 2 * Math.PI);
  ctx.fillStyle = '#4CAF50';
  ctx.fill();

  // 绘制速度文本
  ctx.setFontSize(10);
  ctx.fillStyle = 'black';
  ctx.fillText(speed + ' km/h', centerX - 20, centerY + 20);

  ctx.draw();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    // 清除定时器
    clearInterval(app.globalData.batteryStatus.timer);
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})